import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
import { Logo } from "#/ui/icons";
import { APP_DOMAIN } from "#/lib/constants";

export default function CTA() {
  return (
    <MaxWidthWrapper className="flex flex-col items-center justify-center space-y-5 pt-20 text-center">
      <Logo />
      <h2 className="font-display text-4xl font-extrabold leading-tight text-black sm:text-5xl sm:leading-tight">
        <span className="bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent">
          Supercharge
        </span>
        <br />
        your marketing efforts
      </h2>
      <p className="text-gray-600 sm:text-xl">
        See why Dub is the link management tool of choice for modern marketing
        teams
      </p>
      <a
        href={`${APP_DOMAIN}/register`}
        className="rounded-full border border-black bg-black px-5 py-2 text-sm text-white shadow-lg transition-all hover:bg-white hover:text-black"
      >
        Try Dub For Free
      </a>
      <br />
      <Dashboard />
    </MaxWidthWrapper>
  );
}

const Dashboard = () => {
  return (
    <svg viewBox="0 0 1512 835" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g filter="url(#filter0_b_2322_265)">
        <mask id="path-1-inside-1_2322_265" fill="white">
          <path d="M0 262H1512V835H0V262Z" />
        </mask>
        <path d="M0 262H1512V835H0V262Z" fill="white" fillOpacity="0.35" />
        <path
          d="M1511 262V835H1513V262H1511ZM1 835V262H-1V835H1Z"
          fill="#DDDDDD"
          mask="url(#path-1-inside-1_2322_265)"
        />
      </g>
      <g filter="url(#filter1_b_2322_265)">
        <path
          d="M0 10C0 4.47716 4.47715 0 10 0H1502C1507.52 0 1512 4.47715 1512 10V262H0V10Z"
          fill="white"
          fillOpacity="0.2"
        />
        <path
          d="M10 0.5H1502C1507.25 0.5 1511.5 4.75329 1511.5 10V261.5H0.5V10C0.5 4.7533 4.75329 0.5 10 0.5Z"
          stroke="#DDDDDD"
        />
      </g>
      <rect
        x="1138.5"
        y="169.5"
        width="131"
        height="39"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <g filter="url(#filter2_d_2322_265)">
        <rect
          x="523"
          y="343"
          width="789"
          height="84"
          rx="5"
          fill="white"
          fillOpacity="0.5"
          shapeRendering="crispEdges"
        />
        <rect
          x="523.5"
          y="343.5"
          width="788"
          height="83"
          rx="4.5"
          stroke="#DDDDDD"
          shapeRendering="crispEdges"
        />
      </g>
      <rect
        x="588.5"
        y="360.5"
        width="110"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="764.5"
        y="360.5"
        width="80"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="588.5"
        y="391.5"
        width="253"
        height="15"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="560"
        cy="385"
        r="20.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="719"
        cy="370"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="746"
        cy="370"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <g filter="url(#filter3_d_2322_265)">
        <rect
          x="523"
          y="438"
          width="789"
          height="84"
          rx="5"
          fill="white"
          fillOpacity="0.5"
          shapeRendering="crispEdges"
        />
        <rect
          x="523.5"
          y="438.5"
          width="788"
          height="83"
          rx="4.5"
          stroke="#DDDDDD"
          shapeRendering="crispEdges"
        />
      </g>
      <rect
        x="588.5"
        y="455.5"
        width="110"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="764.5"
        y="455.5"
        width="80"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="588.5"
        y="486.5"
        width="253"
        height="15"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="560"
        cy="480"
        r="20.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="719"
        cy="465"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="746"
        cy="465"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <g filter="url(#filter4_d_2322_265)">
        <rect
          x="523"
          y="533"
          width="789"
          height="84"
          rx="5"
          fill="white"
          fillOpacity="0.5"
          shapeRendering="crispEdges"
        />
        <rect
          x="523.5"
          y="533.5"
          width="788"
          height="83"
          rx="4.5"
          stroke="#DDDDDD"
          shapeRendering="crispEdges"
        />
      </g>
      <rect
        x="588.5"
        y="550.5"
        width="110"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="764.5"
        y="550.5"
        width="80"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="588.5"
        y="581.5"
        width="253"
        height="15"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="560"
        cy="575"
        r="20.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="719"
        cy="560"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="746"
        cy="560"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <g filter="url(#filter5_d_2322_265)">
        <rect
          x="523"
          y="628"
          width="789"
          height="84"
          rx="5"
          fill="white"
          fillOpacity="0.5"
          shapeRendering="crispEdges"
        />
        <rect
          x="523.5"
          y="628.5"
          width="788"
          height="83"
          rx="4.5"
          stroke="#DDDDDD"
          shapeRendering="crispEdges"
        />
      </g>
      <rect
        x="588.5"
        y="645.5"
        width="110"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="764.5"
        y="645.5"
        width="80"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="588.5"
        y="676.5"
        width="253"
        height="15"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="560"
        cy="670"
        r="20.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="719"
        cy="655"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="746"
        cy="655"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <g filter="url(#filter6_d_2322_265)">
        <rect
          x="523"
          y="723"
          width="789"
          height="84"
          rx="5"
          fill="white"
          fillOpacity="0.5"
          shapeRendering="crispEdges"
        />
        <rect
          x="523.5"
          y="723.5"
          width="788"
          height="83"
          rx="4.5"
          stroke="#DDDDDD"
          shapeRendering="crispEdges"
        />
      </g>
      <rect
        x="588.5"
        y="740.5"
        width="110"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="764.5"
        y="740.5"
        width="80"
        height="19"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="588.5"
        y="771.5"
        width="253"
        height="15"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="560"
        cy="765"
        r="20.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="719"
        cy="750"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="746"
        cy="750"
        r="9.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <g filter="url(#filter7_d_2322_265)">
        <rect
          x="196"
          y="343"
          width="303"
          height="443"
          rx="5"
          fill="white"
          fillOpacity="0.5"
          shapeRendering="crispEdges"
        />
        <rect
          x="196.5"
          y="343.5"
          width="302"
          height="442"
          rx="4.5"
          stroke="#DDDDDD"
          shapeRendering="crispEdges"
        />
      </g>
      <rect
        x="1275.5"
        y="169.5"
        width="39"
        height="39"
        rx="4.5"
        fill="white"
        stroke="#DDDDDD"
      />
      <circle
        cx="1296"
        cy="37"
        r="20.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <circle
        cx="294"
        cy="39"
        r="15.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="322.5"
        y="30.5"
        width="72"
        height="16"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="196.5"
        y="84.5"
        width="65"
        height="22"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="278.5"
        y="84.5"
        width="71"
        height="22"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="191.5"
        y="170.5"
        width="95"
        height="39"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <rect
        x="370.5"
        y="84.5"
        width="71"
        height="22"
        rx="4.5"
        fill="#E8E9ED"
        fillOpacity="0.5"
        stroke="#DDDDDD"
      />
      <line y1="117.5" x2="1512" y2="117.5" stroke="#DDDDDD" />
      <line
        x1="191"
        y1="116.5"
        x2="267"
        y2="116.5"
        stroke="#DDDDDD"
        strokeWidth="3"
      />
      <path
        d="M220.126 48.2958H220.626V47.7958V26.1198C224.772 28.9023 227.5 33.6329 227.5 39C227.5 47.5604 220.56 54.5 212 54.5C203.44 54.5 196.5 47.5604 196.5 39C196.5 30.4396 203.44 23.5 212 23.5C213.362 23.5 214.682 23.6755 215.94 24.0049V32.0277C214.736 31.3996 213.367 31.0445 211.916 31.0445C207.106 31.0445 203.207 34.9438 203.207 39.7539C203.207 44.564 207.106 48.4634 211.916 48.4634C213.367 48.4634 214.736 48.1082 215.94 47.4801V47.7958V48.2958H216.44H220.126Z"
        fill="black"
        stroke="#DDDDDD"
      />
      <defs>
        <filter
          id="filter0_b_2322_265"
          x="-10"
          y="252"
          width="1532"
          height="593"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImageFix" stdDeviation="5" />
          <feComposite
            in2="SourceAlpha"
            operator="in"
            result="effect1_backgroundBlur_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_backgroundBlur_2322_265"
            result="shape"
          />
        </filter>
        <filter
          id="filter1_b_2322_265"
          x="-10"
          y="-10"
          width="1532"
          height="282"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImageFix" stdDeviation="5" />
          <feComposite
            in2="SourceAlpha"
            operator="in"
            result="effect1_backgroundBlur_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_backgroundBlur_2322_265"
            result="shape"
          />
        </filter>
        <filter
          id="filter2_d_2322_265"
          x="513"
          y="335"
          width="809"
          height="104"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="2" />
          <feGaussianBlur stdDeviation="5" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_2322_265"
            result="shape"
          />
        </filter>
        <filter
          id="filter3_d_2322_265"
          x="513"
          y="430"
          width="809"
          height="104"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="2" />
          <feGaussianBlur stdDeviation="5" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_2322_265"
            result="shape"
          />
        </filter>
        <filter
          id="filter4_d_2322_265"
          x="513"
          y="525"
          width="809"
          height="104"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="2" />
          <feGaussianBlur stdDeviation="5" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_2322_265"
            result="shape"
          />
        </filter>
        <filter
          id="filter5_d_2322_265"
          x="513"
          y="620"
          width="809"
          height="104"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="2" />
          <feGaussianBlur stdDeviation="5" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_2322_265"
            result="shape"
          />
        </filter>
        <filter
          id="filter6_d_2322_265"
          x="513"
          y="715"
          width="809"
          height="104"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="2" />
          <feGaussianBlur stdDeviation="5" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_2322_265"
            result="shape"
          />
        </filter>
        <filter
          id="filter7_d_2322_265"
          x="186"
          y="335"
          width="323"
          height="463"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="2" />
          <feGaussianBlur stdDeviation="5" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_2322_265"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_2322_265"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  );
};
